<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
	</head>
	<style>
		table{
			margin-top: 50px;
		}
		button{
			margin-right: 15px;
		}
		a:hover{
			cursor: pointer;
		}
	</style>
	<body>
		<div class="container" style="margin-top:20px;">
			<div class="row">
				<div class="col-xs-6">
					<input type="text" placeholder="请输入商品名字" name = 'addname'>
					<button class="add">新增</button>
				</div>
				<div class="col-xs-6">
					<input type="text" placeholder="请输入查询的商品名字" name = 'queryname'>
					<button class="query">查询</button>
				</div>
				<div class="table-responsive col-md-12">
					<table class="table table-bordered">
						<thead>
							<tr>
								<td>商品id</td>
								<td>商品名字</td>
								<td>创建日期</td>
								<td>最新更改日期</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
				<div class="col-xs-12">
					<!-- 修改操作的弹窗 -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					  <div class="modal-dialog" role="document">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					        <h4 class="modal-title" id="myModalLabel">商品信息</h4>
					      </div>
					      <div class="modal-body">
					      		<form class="form-horizontal">
					      		<fieldset disabled>
								  <div class="form-group">
								    <label for="disabledTextInput" class="col-sm-2 control-label">商品id:</label>
								    <div class="col-sm-10">
								      <input type="text" class="form-control" id="disabledTextInput" placeholder="商品id" name = "proId" readonly>
								    </div>
								  </div>
								</fieldset>
								<fieldset>
								  <div class="form-group">
								    <label for="inputPassword3" class="col-sm-2 control-label">商品名字:</label>
								    <div class="col-sm-10">
								      <input type="text" class="form-control" id="inputPassword3" placeholder="商品名字" name = "proName">
								    </div>
								  </div>
								</fieldset>
								<fieldset disabled>
								  <div class="form-group">
								    <label for="disabledTextInput" class="col-sm-2 control-label">创建日期:</label>
								    <div class="col-sm-10">
								      <input type="text" class="form-control" id="disabledTextInput" placeholder="创建日期" name = "proTime" readonly>
								    </div>
								  </div>
								</fieldset>
								</form>
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save(this)">保存</button>
					      </div>
					    </div>
					  </div>
					</div>
				</div>
				
			</div>
		</div>	
		<script src = 'js/jquery.min.js'></script>
		<script src = 'js/bootstrap.js'></script>
		<script>
			// 数组的长度
			var length = '';
			// 新增
			$('.add').click(function(event) {
				if($('input[name="addname"]').val() == ''){
					alert('请输入商品');
				}else{
					// 把原有的内容清空
					$('tbody').html("");
					// 显示所有数据
					$.ajax({
						url: 'http://127.0.0.1:8989/getList',
						method: 'GET',
						dataType:'json',
						success:function(res){
							add(res.myProduct);
						}
					})
					var name = $('input[name="addname"]').val();
					$.ajax({
						url: 'http://127.0.0.1:8989/addList',
						method: 'POST',
						data:{
							name:$('input[name="addname"]').val()
						},
						dataType:'json',
						success:function(res){
							console.log('add');
							add(res);
						}
					})
					$('input[name="addname"]').val('');
				}
			});
			// 加载缓存数据
			function add(data){
				console.log('加载')
				for(var i in data){
					$('tbody').append(`<tr>
						<td trid = ${data[i].id}>${data[i].id}</td>
						<td>${data[i].name}</td>
						<td>${data[i].time}</td>
						<td>${data[i].uptime}</td>
						<td><button type="button" class="btn btn-danger btn-sm"onclick="del(${data[i].id})">删除</button><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" onclick="change(${data[i].id})">修改</button></td>
					</tr>`);
				}
				length = data.length;
			}
			// 查询
			$('.query').click(function(event) {
				if($('input[name="queryname"]').val() == ''){
					alert('请输入查询的商品');
				}else{
					var name = $('input[name="queryname"]').val();
					$.ajax({
					url: 'http://127.0.0.1:8989/queryList',
					method: 'POST',
					data:{
						name:$('input[name="queryname"]').val()
					},
					dataType: 'json',		
					success:function(res){
						$('tbody').html("");
						add(res);
					}
				})
				$('input[name="queryname"]').val('');
				}
			});
			// 删除
			function del(a){
				$.ajax({
					url: 'http://127.0.0.1:8989/delList',
					method: 'POST',
					data:{
						"id":a
					},
					dataType: 'json',		
					success:function(res){
						$('tbody').html("");
						add(res.myProduct);
					}
				})
				length--;
				
			}
			// 修改
			function change(a){
				$.ajax({
					url: 'http://127.0.0.1:8989/changeList',
					method: 'POST',
					data:{
						"id":a
					},
					dataType:'json',
					success:function(res){
						$('input[name="proId"]').val(res[0].id);
						$('input[name="proName"]').val(res[0].name);
						$('input[name="proTime"]').val(res[0].time);
					}
				})
			}
			// 保存修改
			function save(a){
				$.ajax({
					url: 'http://127.0.0.1:8989/saveList',
					method: 'POST',
					data:{
						"id":$('input[name="proId"]').val(),
						"name":$('input[name="proName"]').val(),
						"time":$('input[name="proTime"]').val()
					},
					dataType:'json',
					success:function(res){
						$('tbody').html("");
						add(res.myProduct)
					}
				})
			}
			// 页面加载的时候请求数据
			$.ajax({
				url: 'http://127.0.0.1:8989/getList',
				method: 'GET',
				dataType:'json',
				success:function(res){
					// console.log(res);
					add(res.myProduct);
				}
			})
			
		</script>
	</body>
</html>